<template>
  <div class="radio-list">
    <div class="radio-maininfo" v-for="(item,index) in data" :key="index">
      <div class="radio-img">
        <img v-lazy="item.picUrl" alt="">
      </div>

      <div class="radio-info">
        <div class="radio-name">
          <span>{{ item.name }}</span>
          <span>{{ item.programCount }}个声音, by{{ item.dj.nickname }}, 播放{{ formatData(item.playCount) }}次</span>
        </div>
      </div>
    </div>

    <div class="pagination">
      <van-pagination v-model="currentPage" 
        :total-items="totalCount" 
        :show-page-size="6" 
        :items-per-page="20"
        force-ellipses
        @change="pageChange">
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
      </van-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      data:Array,
      totalCount:Number,
    },

    data() {
      return {
        currentPage:1,
      }
    },

    methods:{
      pageChange(val){
        this.$emit('pageChange',val);
      },

      formatData(value){
        if(value < 10000){
          return value
        }else{
          let result = Math.round(value / 10000)
          return result + '万'
        }
      }
    }
  }
</script>

<style scoped>
.radio-list{
  background-color: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 10px;
}

.radio-maininfo{
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.radio-img{
  margin-right: 15px;
}

.radio-img img{
  width: 80px;
  height: 80px;
  border-radius: 5px;
}

.radio-name{
  display: flex;
  flex-direction: column;
}

.radio-name span:first-child{
  font-size: 15px;
  padding-top: 5px;
}

.radio-name span:last-child{
  font-size: 12px;
  padding-top: 5px;
}

</style>